{% extends 'books/base.html' %}

{% block title %}
    {% if type == 'create' %}Добавить книгу{% else %}Редактируем: "{{ form.title.value }}"{% endif %}
{% endblock title %}

{% block content %}
<form novalidate class="needs-validation" name="book_form" method="post" enctype="multipart/form-data">

    {% csrf_token %}

    {% if type == 'create' %}
        <input required name="book_file" type="file" class="form-control" id="book-file">
        <br>
    {% endif %}


    <div class="card" style="border: none">
      <img src="/static/images/books/img.png" class="card-img" alt="...">
      <div class="card-img-overlay">
        <br><br><br><br>

    {#    Название книги   #}
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-5">
                <label for="book-name" class="form-label" style="color: black">Название книги</label>
                <input required name="title" type="text" id="book-name" class="form-control" value="{{ form.title.value |default_if_none:"" }}">

                    {% if form.title.errors %}
                        <div class="invalid-feedback">{{ form.title.errors }}</div>
                    {% endif %}
            </div>
        </div>

    {#    Автор книги   #}
        <div class="row">
            <div class="col-md-1 mb"></div>
            <div class="col-md-3 mb-3">
                <label for="book-author" class="form-label" style="color: black">Автор</label>
                <input required name="author" type="text" class="form-control" id="book-author" value="{{ form.author.value |default_if_none:""}}">

                    {% if form.author.errors %}
                        <div class="invalid-feedback">{{ form.author.errors }}</div>
                    {% endif %}
            </div>


    {#    Год   #}
            <div class="col-md-2 mb-3">
                <label for="book-published-year" class="form-label" style="color: black">Год</label>
                <input required name="year" type="text" class="form-control" id="book-published-year" value="{{ form.year.value |default_if_none:""}}">

                    {% if form.year.errors %}
                        <div class="invalid-feedback">{{ form.year.errors }}</div>
                    {% endif %}
            </div>
        </div>

    {#    Описание   #}
        <div class="row">
            <div class="col-md-1 mb"></div>
            <div class="col-md-10 mb-3">
                <label for="book-about" class="form-label" style="color: black">Описание</label>
                <textarea required name="about" cols="100" rows="16" class="form-control" id="book-about">{{ form.about.value |default_if_none:""}}</textarea>

                    {% if form.about.errors %}
                        <div class="invalid-feedback">{{ form.about.errors }}</div>
                    {% endif %}
            </div>
        </div>

    {#  Кнопка  #}
      <div class="text-center">
          <button class="btn btn-primary" type="submit">{% if type == 'create' %}Загрузить книгу{% else %}Обновить книгу{% endif %}</button>
      </div>

      </div>
    </div>

</form>
<script>
(() => {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()
</script>
{% endblock %}
